@import 'scss-styles/vars.scss';
@import './common.scss';

$head-h: 8rem;
$divider-padding: 6%;
$divider-point-size: .4rem;
$divider-text-size: .5rem;
$divider-text-h: $divider-text-size * 1.5;
$divider-ltr-spacing: 1.2rem;

.home {
  background: center 0 / cover url('~assets/asoul-stage.png');

  .head {
    position: relative;
    height: $head-h;
    width: 100%;

    .headBg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .bgText {
        font-size: 6rem;
        color: transparent;
        text-align: center;
        font-family: sans-serif;
        font-weight: bold;
        white-space: nowrap;
        letter-spacing: .5rem;
        text-indent: .5rem;
        -webkit-text-stroke-color: $positive-color;
        -webkit-text-stroke-width: 2px;
        transform: scaleY(1.2);
      }
    }

    .title {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .titleInner {
        transform: scaleY(1.5);
      }

      .titleItem {
        color: white;
        font-size: 2rem;
        line-height: 100%;
        text-align: center;
        overflow-y: hidden;
      }

      .titleItem:nth-child(1) {
        height: .5rem;
        margin-top: -.3rem;
      }

      .titleItem:nth-child(2) {
        height: .7rem;
      }

      .titleItem:nth-child(n+2) {
        margin-top: -.1rem;
      }
    }
  }

  .sect {
    padding: 1.5rem 0;
  }
}

.divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: $divider-text-h * 2;
  padding: 0 $divider-padding;
  box-sizing: border-box;

  .point {
    height: $divider-point-size;
    width: $divider-point-size;
    background-color: $white;

    &:first-child {
      right: 100% - $divider-padding;
    }

    &:last-child {
      left: 100% - $divider-padding;
    }
  }

  .dividerInner {
    width: 96%;
    height: 100%;
    margin: 0 2%;

    .dividerText {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tItem {
        color: $white;
        font-size: $divider-text-size;
        line-height: $divider-text-h;
        letter-spacing: $divider-ltr-spacing;

        &:last-child {
          margin-right: -1rem;
        }
      }
    }

    .hoz {
      height: 1px;
      background-color: $white;
    }
  }
}

.sectHead {
  @include content-limit();
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .sideline {
    width: 42%;
    max-width: 300px;
  }

  .sectHeadNo {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: 'OPPOSans';
    color: $white;
  }
}

.museumTitle {
  @mixin shadowed {
    text-shadow:
      0 .2rem 0 #939393,
      0 .4rem 0 #000000,
      0 .4rem .1rem #ffffff;
  }

  &>* {
    font-family: 'OPPOSans';
    font-size: 2rem;
    color: $white;
    height: 3rem;
    line-height: 3rem;
    letter-spacing: .2rem;
  }

  .titleAsoul {
    @include shadowed();
  }

  .titleDesc {
    color: $positive-color;
  }

  .titleName {
    @include shadowed();
  }
}
